import RouterView from '../../router/RouterView'
import React, { Component } from 'react'
import Detail from '../Detail'
export class List extends Component {
    constructor(props) {
        super(props)
        console.log('初始化的触发')
        this.state = {
            num: 0
        }
    }
    // 实例期
    componentWillMount() {
        console.log('组件将要挂载')
    }
    render() {
        console.log('仅仅是生产虚拟dom')
        let {routes, match} = this.props;
        return (
            <>
                列表
                <button onClick={() => this.setState({num: this.state.num + 1})}>add</button>
                <Detail num={this.state.num}></Detail>
                <RouterView routes={routes} matchPath={match.path}></RouterView>
            </>
            
        )
    }
    componentDidMount() {
        console.log('组件挂载完成')
    }

    // 存在期
    // 两种情况 
    // 第一种 state 发生变化的时候触发
    // 第二种 props 发生变化的时候触发

    // state
    shouldComponentUpdate() {
        console.log('shouldComponentUpdate， 决定了我们的组件是否要更新')
        return true;
    }

    componentWillUpdate() {
        console.log('componentWillUpdate， 组件将要更新')
    }

    // render() {}

    componentDidUpdate() {
        console.log('componentDidUpdate，组件更新完成')
    }
}

